<template>
	<view class="center">
		<!-- 	<view class="search_input">
			<liu-search-bar :mode="3" @confirm="confirm" v-model="searchQuery" @input="debounceSearch"></liu-search-bar>
		</view> -->
		<!-- <input type="text" v-model="searchQuery" @input="debounceSearch" placeholder="请输入地址" /> -->

		<!-- 列表展示地址 -->
		<scroll-view class="address-list" scroll-y="true" @scrolltolower="loadMore">
			<view v-for="(item, index) in addresses" :key="index" class="address-item">
				<text class="top-Btext">{{item.contacts}} <text class="tel">{{item.phone}}</text> </text>
				<text class="top-Gtext">{{item.provincial}} {{item.district}} {{item.detail}}</text>
			</view>
			<!-- 加载提示 -->
			<view v-if="loadingMore" class="loading-tip">正在加载...</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		allAddress,
		delAddress,
		editAddress
	} from '../../api/apia';
	export default {
		data() {
			return {
				searchQuery: '', // 查询输入  
				addresses: [], // 原始地址列表  
				filteredAddresses: [], // 过滤后的地址列表  
				loadingMore: false, // 是否正在加载更多数据  
				page: 1, // 分页页码  
				debounceTimeout: null, // 防抖定时器  
			};
		},
		mounted() {
			// 初始加载地址列表  
			this.loadAddresses();
		},
		methods: {
			// 加载地址列表  
			async loadAddresses(page = 1) {
				// 假设这里是从后端API获取数据，你需要替换为实际的数据请求  
				// 这里只是模拟数据  
				// const result = [
				// 	// ...模拟的地址数据  
				// ];
				let {
					result
				} = await allAddress(15)
				console.log(result);
				// 假设你每次加载10条数据，这里只是模拟  
				const startIndex = (page - 1) * 10;
				const endIndex = page * 10;
				this.addresses = this.addresses.concat(result.slice(startIndex, endIndex));
				console.log(this.addresses);
				// 更新过滤后的地址列表  
				// this.filterAddresses();
			},
			// 防抖的模糊查询  
			debounceSearch() {
				if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
				this.debounceTimeout = setTimeout(() => {
					this.filterAddresses();
				}, 300); // 设置防抖时间为300毫秒  
			},

			// 过滤地址列表  
			filterAddresses() {
				// const query = this.searchQuery.trim().toLowerCase();
				// this.filteredAddresses = this.addresses.filter(address => {
				// 	return (
				// 		address.name.toLowerCase().includes(query) ||
				// 		address.detail.toLowerCase().includes(query)
				// 	);
				// });
			},
			// 加载更多地址  
			loadMore() {
				if (this.loadingMore) return; // 防止重复请求  
				this.loadingMore = true;
				this.page++;
				this.loadAddresses(this.page); // 加载下一页数据  
				// 假设数据加载是异步的，加载完成后设置loadingMore为false  
				setTimeout(() => {
					this.loadingMore = false;
				}, 1000); // 模拟异步加载时间  
			},
		},
	};
</script>
<style lang="scss" scoped>
	.center {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 样式省略 */
	.search_input {
		width: 750rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		padding: 8rpx 32rpx 16rpx 32rpx;
		box-sizing: border-box;
	}

	.address-list {
		box-sizing: border-box;
		width: 100%;
		flex-grow: 1;
		overflow-y: auto;
		background-color: rgb(242, 243, 245);
		padding: 16rpx 32rpx 0 32rpx;

		// 地址样式
		.address-item {
			width: 686rpx;
			height: 148rpx;
			margin-top: 16rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 32rpx;

			.top-Btext {
				display: block;
				font-size: 30rpx;

				.tel {
					margin-left: 30rpx;
				}
			}

			.top-Gtext {
				display: block;
				font-size: 23rpx;
				color: #7f7f7f;
				margin-top: 20rpx;
			}
		}

		.address-item:nth-child(1) {
			margin-top: 0;
		}
	}
</style>